import { Animated, type AnimatedProp, cx, memo } from '@arwes/react'

import styles from './ArwesLogoIcon.module.css'

interface ArwesLogoIconProps {
  className?: string
  animated?: AnimatedProp
}

const ArwesLogoIcon = memo((props: ArwesLogoIconProps): JSX.Element => {
  const { className, animated } = props
  return (
    <Animated<SVGSVGElement>
      as="svg"
      className={cx(styles.root, className)}
      animated={animated}
      viewBox="0 0 1000 1000"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M499.904 655.474C580.765 655.474 646.316 588.994 646.316 506.988C646.316 424.981 580.765 358.502 499.904 358.502C419.044 358.502 353.493 424.981 353.493 506.988C353.493 588.994 419.044 655.474 499.904 655.474Z"
        fill="#00FFFF"
      />
      <path
        d="M500.096 188.859C326.89 188.665 186.22 331.134 186.029 506.794C185.837 682.453 326.316 825.116 499.522 825.311C672.727 825.505 813.397 683.036 813.588 507.376C813.78 331.522 673.493 188.859 500.096 188.859ZM499.713 744.177C370.526 743.983 265.837 637.811 266.029 506.794C266.22 375.777 370.909 269.604 500.096 269.798C629.282 269.993 733.971 376.165 733.78 507.182C733.78 638.199 628.899 744.371 499.713 744.177Z"
        fill="#009999"
      />
      <path
        d="M500.287 13.9757C231.771 13.7816 13.9715 234.278 13.7802 506.6C13.5888 778.727 231.005 999.806 499.522 1000C768.038 1000.19 985.837 779.697 986.029 507.376C986.22 235.055 768.804 14.1698 500.287 13.9757ZM499.522 896.351C287.464 896.157 115.79 721.662 115.981 506.794C116.172 291.732 288.23 117.625 500.096 117.819C712.153 118.013 883.828 292.508 883.636 507.376C883.636 722.244 711.579 896.351 499.522 896.351Z"
        fill="#003333"
      />
      <path
        d="M129.187 506.6C129.187 489.519 130.526 472.826 132.632 456.522L9.1868 409.744C3.25378 440.994 0.00019479 473.409 0.00019479 506.6C-0.191193 728.843 140.67 917.896 337.034 986.413L358.66 854.62C223.924 798.331 128.995 663.626 129.187 506.6Z"
        fill="#00FFFF"
      />
      <path
        d="M500.287 0.000601691C374.928 -0.193498 260.287 46.5844 172.44 124.03L274.067 208.851C336.651 159.938 415.12 130.823 500.287 131.018C585.263 131.018 663.349 160.132 725.933 208.851L827.56 124.03C739.713 46.7785 625.455 0.194701 500.287 0.000601691Z"
        fill="#00FFFF"
      />
      <path
        d="M990.622 409.744L867.368 456.522C869.474 473.215 870.813 490.101 870.813 507.376C870.622 664.208 775.885 798.525 641.34 854.814L662.966 986.607C858.947 918.09 999.809 729.62 1000 507.57C999.809 473.991 996.555 441.382 990.622 409.744Z"
        fill="#00FFFF"
      />
    </Animated>
  )
})

export { ArwesLogoIcon }
